<template>
  <div class="flex-column">
    <div class="flex justify-end">
      <div class="flex flex-wrap">
        <el-input
          v-model.trim="param.keyword"
          maxlength="32"
          style="width: 300px"
          clearable
          class="ml-10 mb-10"
          :placeholder="`${$t('TASKNUMBER')}/${$t('DEVICE_NAME')}`"
          @change="search"
          @keyup.enter.native="$debounce(search)"
        />
        <el-button type="primary" class="ml-10 mb-10" @click="$debounce(search)">{{
          $t('QUERY')
        }}</el-button>
      </div>
    </div>
    <TableView
      :table-header="tableHeader"
      :table-data="tableData"
      :page-data="pageData"
      :operate-width="100"
      @operate="operate"
      @pageChange="pageChange"
    >
      <template v-slot:progressStr="slotProps">
        <el-progress
          :color="slotProps.row.status === 'FAIL' ? '#F56C6C' : '#67C23A'"
          :percentage="slotProps.row.progress || 0"
        />
      </template>
    </TableView>
    <Log-Detail :task-data="taskData" :visible.sync="logVisible" @close="logVisible = false" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import subTaskApi from '@/api/oen/SubTaskApi'
  import TableView from '@/components/TableView'
  import LogDetail from '@/views/module/info/process/components/LogDetail'

  export default {
    name: 'TaskStatus',
    components: { TableView, LogDetail },
    data() {
      return {
        searchData: {},
        tableData: [],
        param: {
          keyword: '',
          status: 'PROCESS'
        },
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        logVisible: false,
        taskData: {},
        tableHeader: [
          {
            label: 'TASKNUMBER',
            prop: 'subTaskId',
            width: '260'
          },
          {
            label: 'TASK_TYPE',
            prop: 'taskTypeName',
            width: '100'
          },
          {
            label: 'DESCRIPTION',
            prop: 'description',
            width: '300'
          },
          {
            label: 'DEVICE_NAME',
            prop: 'afsDeviceName',
            width: '150'
          },
          {
            label: 'DEVICE_CODE',
            prop: 'afsDeviceId',
            width: '150'
          },
          {
            label: 'STATE',
            prop: 'statusName',
            width: '80'
          },
          {
            label: 'PROGRESS',
            prop: 'progressStr',
            width: '180',
            isProgress: true,
            slotName: 'progress'
          },
          {
            label: 'START_TIME',
            prop: 'startTime',
            width: '150'
          },
          {
            label: 'CREATION_TIME',
            prop: 'createTime',
            width: '150'
          }
        ]
      }
    },
    computed: {
      ...mapGetters(['dictMap'])
    },
    created() {
      this.searchData = {
        ...this.param
      }
      this.loadData()
    },
    methods: {
      async loadData() {
        const param = {
          ...this.searchData,
          page: this.pageData.page,
          size: this.pageData.size
        }
        const result = await subTaskApi.queryPage(param, this.pageData)
        const list = result && result.list ? result.list : []
        list.forEach(i => {
          i.taskTypeName = this.dictMap.PROCESS_LIST_TASK_TYPE[i.taskType] || ''
          i.statusName = this.dictMap.PROCESS_TASK_STATE[i.status] || ''
          i.taskId = i.subTaskId
          i.description = this.$utils.handleServiceI18n(i.description)
          i.btns = this.getBtns()
        })
        this.tableData = list
      },
      getBtns(row) {
        const btns = [
          {
            key: 'log',
            show: true,
            label: 'LOG_BTN'
          },
          {
            key: 'stop',
            show: true,
            label: 'STOP'
          }
        ]
        return btns
      },
      operate(data) {
        if (data.type === 'log') {
          this.taskData = data.data
          this.logVisible = true
        } else {
          this.showStopTaskDialog(data.data)
        }
      },
      showStopTaskDialog({ taskId }) {
        // 停止主任务/子任务提示
        // 显示任务弹窗
        this.$confirm(this.$t('ARE_YOU_SURE_STOP_TASK', { name: taskId }))
          .then(() => {
            this.stopTask(taskId)
          })
          .catch(err => {
            console.log(err)
          })
      },
      async stopTask(taskId) {
        // 操作日志需要的参数
        const logParams = {
          processName: '',
          taskId: taskId
        }
        const res = await subTaskApi.stopSubTask({ subTaskId: taskId, logParams })
        if (res) {
          this.$message.success(this.$t('EXECUTE_RESULT_SUCCESS'))
          this.loadData()
        }
      },
      search() {
        this.pageData.page = 1
        this.searchData = {
          ...this.param
        }
        this.loadData()
      },
      pageChange(data) {
        this.pageData = data
        this.loadData()
      }
    }
  }
</script>

<style scoped></style>
